<template>
  <div class="all" ref="box">
    <div class="top">
      <header>
        <div class="div">
          <img src="../../../assets/返回.png" @click="back()" alt="">
          <span class="solid" @click="back()">返回</span>
        </div>
        <div class="div">
          <span>{{title}}</span>
        </div>
        <div class="div">
          <span class="solid" @click="next()">下一步</span>
        </div>
      </header>
      <div class="menu">
        <el-steps :active="menuIndex" align-center>
          <el-step title=""
                   v-for="(item, index) in (type== 5 ? menuList5 : menuList)"
                   :key="index"
                   @click.native="changeMenu(index, url)"
                   process-status="success"
                   :description="item.title">
            <template #icon>
              <div v-if="menuIndex >= index" style="width: 15px;height: 15px;">
                <img src="../../../assets/步骤选择.png" style="width: 15px;height: 15px;" alt="">
              </div>
              <div v-else style="width: 6px;height: 15px;background: #1DA4F2;display: flex;align-items: center;justify-content: center">
                <a style="width: 6px;height: 6px;border-radius: 50%;background: white;display: flex;position: absolute;"></a>
              </div>
            </template>
          </el-step>
        </el-steps>
      </div>
      <van-tabs v-model="activeTab" @change="tabChange()"  color="#1da4f2">
        <van-tab title="医生"></van-tab>
        <van-tab title="团队"></van-tab>
      </van-tabs>
      <van-dropdown-menu active-color="#1DA4F4" >
        <van-dropdown-item ref="item" :title="CityTitle" @change="onchange(0)" >
          <van-tree-select
            @click-nav="clickNav()"
            :items="items"
            :main-active-index.sync="activeIndex"
          >
            <template slot="content" >
              <ul class="right-content">
                <li v-for="(item,index) in policeList" :key="index"
                    @click="onItemClick(item.text)"> {{item.text}}
                  <van-icon v-show="CityTitle == item.text" name="success" color="#1da4f2" />
                </li>
              </ul>
<!--       :class="{active:text==item.text}"       -->
            </template>
          </van-tree-select>
        </van-dropdown-item>
        <van-dropdown-item :title="staffTypeTitle" v-model="staffType" @change="onchange(4)" :options="option5" />
        <van-dropdown-item :title="keshiTitle" v-model="DEPART" @change="onchange(1)" :options="option2" />
        <van-dropdown-item :title="gradeTitle" v-model="grade_id" @change="onchange(2)" :options="option3" />
        <van-dropdown-item  v-if="activeTab == 0" :title="doctorTitle" v-model="MAJOR" @change="onchange(3)" :options="option4" />
      </van-dropdown-menu>
    </div>
    <van-empty
      style="width: 100%;height: 60%"
      v-show="doctorList.length <= 0 && isLoading === false && activeTab == 0"
      class="custom-image"
      :image="require('../../../assets/空两本书.png')"
      description="暂无符合条件医生"
    />
    <van-empty
      style="width: 100%;height: 60%"
      v-show="teamList.length <= 0 && isLoading === false && activeTab == 1"
      class="custom-image"
      :image="require('../../../assets/空两本书.png')"
      description="暂无符合条件团队"
    />
    <div class="box"
         v-show="activeTab == 0"
         :class="[selectID === item.USER_ID ? 'select' : '']"
         @click="clickBox(item)"
         v-for="(item, index) in doctorList" :key="index">
      <div class="box_left">
        <img v-if="item.PHOTO !== '' && item.PHOTO !== undefined && item.PHOTO !== null" :src="item.PHOTO" class="PHOTO" alt="">
        <img v-else src="../../../assets/男医生@2x.png" class="PHOTO" alt="">
<!--        <span class="dict_name">{{item.dict_name}}</span>-->
        <span v-if="item.inquiry_id !== null" class="wenZhenIng"><a></a>{{typeLabel}}中</span>
        <span v-else></span>
      </div>
      <div class="box_right">
        <ul>
          <li>
            <span class="name">
              <span style="font-weight: bold;font-size: 15px">{{item.NICK_NAME}}</span>
<!--              <span>|</span>-->
<!--              <span style="font-weight: 500;font-size: 13px !important;">{{item.MAJOR}}</span>-->
<!--              <span>|</span>-->
<!--              <span style="font-weight: 500;font-size: 13px !important;">{{item.DEPART}}</span>-->
            </span>
            <button class="btnXiangQing" @click.stop="doctorInfo(item)">医生详情
              <img src="../../../assets/更多白.png" alt="">
            </button>
          </li>
          <li>
            <span style="font-weight: 500;font-size: 13px !important;">{{item.MAJOR}}</span>
            <span>&nbsp;|&nbsp;</span>
            <span style="font-weight: 500;font-size: 13px !important;">{{item.DEPART}}</span>
          </li>
          <li>
            <span class="jieShao">{{item.HOSPITAL_NAME}}</span>
            <button class="biaoqian" v-if="item.GRADE">{{item.GRADE}}</button>

          </li>
        </ul>
<!--        <div class="box_rigth_bottom">
          <p>
            <a >接诊率:</a><span>{{item.jiezhenCount}}</span>
            <a >好评率:</a><span>{{item.haopingLv}}</span>
            <a >咨询量:</a><span>{{item.zixunCount}}</span>
          </p>
          <p class="goodAt">
            <a style="display: block">擅长:</a>
            <span>{{item.Goodat}}</span>
          </p>
          <p>
            <a >最快回复:</a>
            <span style="color: #1DA4F2"  v-if="item.min !== undefined && item.min !== null && item.min !== ''">{{item.min}}</span>
            <span v-else style="color: #999999">暂无</span>
            <a >平均回复:</a>
            <span style="color: #1DA4F2" v-if="item.avg !== undefined && item.avg !== null && item.avg !== ''">{{item.avg}}</span>
            <span style="color: #999999" v-else>暂无</span>
          </p>
        </div>-->
      </div>
    </div>

    <div class="box"
         v-show="activeTab == 1"
         @click="clickBox(item)"
         v-for="(item, index) in teamList" :key="index" :class="selectID == item.id ? 'select' : ''">
      <div class="box_left">
        <img v-if="item.team_icon !== '' && item.team_icon !== undefined && item.team_icon !== null"
             :src="item.team_icon" class="PHOTO" alt="">
        <img v-else src="../../../assets/男医生@2x.png" class="PHOTO" alt="">
      </div>
      <div class="box_right">
        <ul>
          <li>
            <span class="name">
              {{item.team_name}}
               <a style="font-size: 13px;font-weight: 500">（{{item.count}}人）</a>
            </span>
            <button class="btnXiangQing" @click.stop="teamInfo(item)">团队详情
              <img src="../../../assets/更多白.png" alt="">
            </button>
          </li>
          <li>
            <span >团队长：{{item.NICK_NAME}}</span>
            &nbsp;
            &nbsp;
            <span style="font-weight: 500;font-size: 13px !important;">{{item.MAJOR}}</span>
            <span>|</span>
            <span style="font-weight: 500;font-size: 13px !important;">{{item.DEPART}}</span>
<!--            <span>团队人数：{{item.count}}人</span>-->
          </li>
<!--          <li>-->
<!--            <span style="font-weight: 500;font-size: 13px !important;">{{item.MAJOR}}</span>-->
<!--            <span>|</span>-->
<!--            <span style="font-weight: 500;font-size: 13px !important;">{{item.DEPART}}</span>-->
<!--          </li>-->
          <li>
            <span class="jieShao">{{item.HOSPITAL_NAME}}</span>
            <button class="biaoqian">{{item.GRADE}}</button>
          </li>
        </ul>
<!--        <div class="box_rigth_bottom">
          <p>
            <a >接诊率:</a>
            <span v-if=" item.jiezhenCount!== undefined && item.jiezhenCount!== null && item.jiezhenCount!== ''">{{item.jiezhenCount}}</span>
            <span v-else>暂无</span>
            <a >好评率:</a>
            <span v-if=" item.haopingLv!== undefined && item.haopingLv!== null && item.haopingLv!== ''">{{item.haopingLv}}</span>
            <span v-else>暂无</span>
            <a >咨询量:</a>
            <span v-if=" item.zixunCount!== undefined && item.zixunCount!== null && item.zixunCount!== ''">{{item.zixunCount}}</span>
            <span v-else>暂无</span>
          </p>
          <p class="goodAt">
            <a style="display: block">擅长:</a>
            <span>{{item.team_goodat}}</span>
          </p>
          <p>
            <a >最快回复:</a>
            <span style="color: #1DA4F2"  v-if="item.min !== undefined && item.min !== null && item.min !== ''">{{item.min}}</span>
            <span v-else style="color: #999999">暂无</span>
            <a >平均回复:</a>
            <span style="color: #1DA4F2" v-if="item.avg !== undefined && item.avg !== null && item.avg !== ''">{{item.avg}}</span>
            <span style="color: #999999" v-else>暂无</span>
          </p>
        </div>-->
      </div>
    </div>

    <div  style="width: 100%;height: 50vh;display: flex;align-items: center;justify-content: center" v-show="isLoading">
      <van-loading size="24px" type="spinner" color="#1989fa">加载中...</van-loading>
    </div>
    <van-dialog v-model="backShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="该记录未保存，是否确认退出？"
                @confirm="backConfirm()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
import area from '../../../components/China/area'
import {Toast} from 'vant'
import $ from 'jquery'
import city from '../../../components/China/TreeSelectCity'
export default {
  name: 'TuWenFirstAdd',
  data () {
    return {
      menuIndex: 0,
      menuList: [
        {
          title: '选择医生/团队',
          url: '/first'
        },
        {
          title: '预约信息',
          url: '/tuWenPrice'
        },
        {
          title: '咨询准备',
          url: '/second'
        },
        {
          title: '费用支付',
          url: '/third'
        }
      ],
      menuList5: [
        {
          title: '选择医生/团队',
          url: '/first'
        },
        {
          title: '预约信息',
          url: '/tuWenPrice'
        },
        {
          title: '会诊准备',
          url: '/second'
        },
        {
          title: '费用支付',
          url: '/third'
        }
      ],
      // menuList: ['选择医生', '选择服务', '选择咨询人', '描述病情', '费用支付'],
      PROVINCE: '',
      city: '',
      MAJOR: '', // 医生职称
      grade_id: '',
      DEPART: '', // 科室
      staffType: '', // 医生类型
      CityTitle: '全国',
      keshiTitle: '科室选择',
      gradeTitle: '医院等级',
      doctorTitle: '职称',
      staffTypeTitle: '医生类型',
      option1: [],
      option2: [],
      option3: [
        {text: '不限', value: ''},
        {
          text: '一甲',
          value: '一甲'
        }, {
          text: '一乙',
          value: '一乙'
        }, {
          text: '二甲',
          value: '二甲'
        }, {
          text: '二乙',
          value: '二乙'
        }, {
          text: '三甲',
          value: '三甲'
        }, {
          text: '三乙',
          value: '三乙'
        }, {
          text: '社区',
          value: '社区'
        }
      ],
      option4: [
        {text: '不限', value: ''},
        {text: '主任医师', value: '主任医师'},
        {text: '副主任医师', value: '副主任医师'},
        {text: '主治医师', value: '主治医师'},
        {text: '主管护理师', value: '主管护理师'}
      ],
      option5: [],
      areaList: area,
      doctorList: [],
      selectID: '',
      type: Number(this.$route.query.type),
      items: city.children,
      activeIndex: 0,
      policeList: [],
      backShow: false,
      isLoading: true,
      activeTab: 0,
      page: 1,
      isScroll: true,
      teamList: [],
      team_id: '',
      team_doc_id: ''
    }
  },
  computed: {
    userid () {
      if (sessionStorage.getItem('selfInformation')) {
        let data = JSON.parse(sessionStorage.getItem('selfInformation'))
        return data.userid
      }
    },
    typeLabel: function () {
      if (this.type !== 5) {
        return '咨询'
      } else {
        return '会诊'
      }
    },
    title: function () {
      if (this.type === 1) {
        document.title = '图文咨询'
        return '图文咨询'
      } else if (this.type === 2) {
        document.title = '视频咨询'
        return '视频咨询'
      } else if (this.type === 5) {
        document.title = '远程会诊'
        return '远程会诊'
      }
    }
  },
  mounted () {
    if (JSON.parse(sessionStorage.getItem('FirstData')) !== null) {
      var data = JSON.parse(sessionStorage.getItem('FirstData'))
      this.PROVINCE = data.PROVINCE
      this.city = data.city
      this.MAJOR = data.MAJOR // 医生职称
      this.grade_id = data.grade_id
      this.DEPART = data.DEPART // 科室
      this.CityTitle = data.CityTitle // 城市
      this.keshiTitle = data.keshiTitle // 科室选择
      this.gradeTitle = data.gradeTitle // 医院等级
      this.doctorTitle = data.doctorTitle // 医生职称
      this.activeIndex = data.activeIndex // 医生职称
      this.staffType = data.staffType // 医生类型
      this.staffTypeTitle = data.staffTypeTitle // 医生类型
      this.team_id = data.team_id
      this.USER_ID = data.team_doc_id
      this.activeTab = data.activeTab
      if (this.team_id) {
        this.selectID = data.team_id
      } else {
        this.selectID = data.doctorUserID
      }
    }
    if (this.type == 1) {
      document.title = '图文咨询'
    } else if (this.type == 2) {
      document.title = '视频咨询'
    }
    // this.selectID = sessionStorage.getItem('doctorUserID')
    // 科室
    this.getKeShi()
    // 医院等级
    // this.getHospotal()
    // 医生职称
    // this.getZhiCheng()
    this.clickNav()
    // 获取医生类型
    this.getDoctor_staffType()
    // 筛选后 医生
    this.getDoctor()
    this.getTeam()
  },
  methods: {
    teamInfo (item) {
      this.$router.push({path: '/LookTeamHome', query: {userid: this.userid, id: item.id, topActive: 3}})
      window.removeEventListener('scroll', this.scrollBottom, true)
    },
    // 滚动事件
    scrollBottom () {
      let scrollTop = this.$refs.box.scrollTop
      let clientHeight = this.$refs.box.clientHeight
      let scrollHeight = this.$refs.box.scrollHeight
      if (scrollHeight - scrollTop <= clientHeight + 300 && this.isScroll === true) {
        this.isScroll = false
        setTimeout(() => {
          this.page += 1
          this.isLoading = true
          // 移除滚动事件
          window.removeEventListener('scroll', this.scrollBottom, true)
          this.getTeam()
        }, 500)
      }
    },
    tabChange () {
      if (this.activeTab == 0) {
        window.removeEventListener('scroll', this.scrollBottom, true)
      } else if (this.activeTab == 1) {
        window.addEventListener('scroll', this.scrollBottom, true)
        this.page = 1
      }
    },
    // 获取医生类型
    getDoctor_staffType () {
      this.$http.listByType({dict_type: 'staff_type'})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.option5 = [
              {text: '不限', value: ''}
            ]
            for (let i in res.data.data) {
              let obj = {
                text: res.data.data[i].dict_name, value: res.data.data[i].dict_value
              }
              this.option5.push(obj)
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    onItemClick (city) {
      this.city = city
      this.CityTitle = city
      this.$refs.item.toggle()
      // this.getDoctor()
      if (this.activeTab == 0) {
        this.getDoctor()
      } else if (this.activeTab == 1) {
        this.getTeam()
      }
    },
    clickNav () {
      this.policeList = this.items[this.activeIndex].children
      this.PROVINCE = this.items[this.activeIndex].text
    },
    backConfirm () {
      this.backShow = false
      this.$router.history.go(-1)
    },
    // 返回
    back () {
      this.backShow = true
    },
    // 点击医生跳转
    clickBox (item) {
      if (item.inquiry_id !== null && this.activeTab == 0) {
        Toast('您尚有' + this.typeLabel + '服务未结束，不能重复预约')
        // 您与此提供咨询者尚未结束咨询
        this.selectID = ''
        return false
      }
      var obj = {
        PROVINCE: this.PROVINCE,
        city: this.city,
        MAJOR: this.MAJOR, // 医生职称
        grade_id: this.grade_id,
        DEPART: this.DEPART, // 科室
        CityTitle: this.CityTitle, // 城市
        keshiTitle: this.keshiTitle, // 科室选择
        gradeTitle: this.gradeTitle, // 医院等级
        doctorTitle: this.doctorTitle, // 医生职称
        name: item.NICK_NAME,
        activeIndex: this.activeIndex,
        staffType: this.staffType, // 医生类型
        staffTypeTitle: this.staffTypeTitle, // 医生类型文字
        activeTab: this.activeTab // 当前是医生还是团队
      }

      sessionStorage.setItem('FirstData', JSON.stringify(obj))
      var data = JSON.parse(sessionStorage.getItem('DATA'))
      data.book_date = ''
      data.book_time_start = ''
      data.book_time_end = ''
      data.schedule_id = '' // 排班id

      if (this.activeTab == 0) { // 选医生
        obj.doctorUserID = item.USER_ID
        this.selectID = item.USER_ID

        obj.team_id = ''
        obj.team_doc_id = ''

        data.team_id = ''
        data.team_doc_id = ''
        data.doc_user_id = item.USER_ID

        this.team_id = ''
        this.team_doc_id = ''
      } else if (this.activeTab == 1) { // 选团队
        obj.doctorUserID = ''
        this.selectID = item.id

        obj.team_id = item.id
        obj.team_doc_id = item.USER_ID

        data.team_id = item.id
        data.team_doc_id = item.USER_ID
        data.doc_user_id = ''

        this.team_id = item.id
        this.team_doc_id = item.USER_ID
      }
      sessionStorage.setItem('DATA', JSON.stringify(data))
    },
    next () {
      if ($('.select').length <= 0) {
        Toast('请先选择医生')
        return false
      }
      let path
      if (this.type == 5) {
        path = this.menuList5[this.menuIndex + 1].url
      } else {
        path = this.menuList[this.menuIndex + 1].url
      }
      window.removeEventListener('scroll', this.scrollBottom, true)
      this.$router.push({path: path, query: {'type': this.type, team_id: this.team_id}})
      // this.$router.push({path: '/tuWenPrice', query: {'type': this.type}})
    },
    // 查看医生详细资料
    doctorInfo (data) {
      // sessionStorage.setItem('doctorInfo', JSON.stringify(data))
      this.$router.push({path: '/doctorInfo', query: {doc_user_id: data.USER_ID}})
    },
    getTeam () {
      this.isLoading = true
      if (this.city === '全国') {
        this.city = ''
      }
      this.$http.TeamList({
        page: this.page,
        city: this.city,
        grade_name: this.grade_id,
        DEPART: this.DEPART,
        type: this.staffType
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            // this.teamList = res.data.data
            // this.isLoading = false
            var _this = this
            if (Number(this.page) === 1) {
              this.teamList = []
              this.teamList = res.data.data
            } else {
              res.data.data.forEach(function (current, index, arr) {
                _this.teamList.push(current)
              })
            }
            if (res.data.data.length > 0) {
              window.addEventListener('scroll', this.scrollBottom, true)
              this.isScroll = true
            } else {
              window.removeEventListener('scroll', this.scrollBottom, true)
              this.isScroll = false
            }
            this.isLoading = false
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 获取符合筛选医生信息
    getDoctor () {
      this.isLoading = true
      if (this.PROVINCE === '全国') {
        this.PROVINCE = ''
      }
      if (this.city === '全国') {
        this.city = ''
      }
      this.$http.findDoctor({PROVINCE: this.PROVINCE,
        city: this.city,
        MAJOR: this.MAJOR,
        grade_name: this.grade_id,
        DEPART: this.DEPART,
        type: this.staffType,
        item_type: this.type
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.doctorList = res.data.data
            this.isLoading = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 筛选框发生更改时触发
    onchange (index) {
      var _this = this
      // DEPART 科室选择  keshiTitle

      var Data
      // eslint-disable-next-line eqeqeq
      if (index == 1) {
        Data = this.option2.filter(function (item) {
          return item.value === _this.DEPART
        })
        if (Data[0].text === '不限') {
          this.keshiTitle = '科室选择'
        } else {
          this.keshiTitle = Data.text
        }
        // eslint-disable-next-line eqeqeq
      } else if (index == 2) {
        // grade_id 医院等级  gradeTitle
        Data = this.option3.filter(function (item) {
          return item.value === _this.grade_id
        })
        if (Data[0].text === '不限') {
          this.gradeTitle = '医院等级'
        } else {
          this.gradeTitle = Data.text
        }
        // eslint-disable-next-line eqeqeq
      } else if (index == 3) {
        // MAJOR 医生职称  doctorTitle
        Data = this.option4.filter(function (item) {
          return item.value === _this.MAJOR
        })
        if (Data[0].text === '不限') {
          this.doctorTitle = '职称'
        } else {
          this.doctorTitle = Data.text
        }
      } else if (index == 4) {
        // MAJOR 医生职称  doctorTitle
        Data = this.option5.filter(function (item) {
          return item.value === _this.staffType
        })
        if (Data[0].text === '不限') {
          this.staffTypeTitle = '医生类型'
        } else {
          this.staffTypeTitle = Data.text
        }
      }
      if (this.activeTab == 0) {
        this.getDoctor()
      } else if (this.activeTab == 1) {
        this.getTeam()
      }
    },
    // 点击步骤条
    changeMenu (index) {
      // this.menuIndex = index
      // if (index === 0) {
      //   this.$router.push({path: '/first'})
      // }
      // if (index === 1) {
      //   this.$router.push({path: '/second'})
      // }
      // if (index === 2) {
      //   this.$router.push({path: '/third'})
      // }
    },
    // 城市确认按钮
    Cityconfirm (val) {
      if (val[0].name !== '' && val[0].name !== undefined && val[1].name !== '' && val[1].name !== undefined) {
        this.PROVINCE = val[0].name
        this.city = val[1].name
        this.CityTitle = val[1].name
        this.$refs.item.toggle()
      } else {
        // Toast('省市名称格式不正确')
        this.PROVINCE = ''
        this.city = ''
        this.CityTitle = '全国'
        this.$refs.item.toggle()
      }
      if (this.activeTab == 0) {
        this.getDoctor()
      } else if (this.activeTab == 1) {
        this.getTeam()
      }
    },
    // 城市取消按钮
    CityCancel () {
      this.$refs.item.toggle()
    },
    // 获取科室
    getKeShi () {
      // checkInspection/findKeShiZiDian
      this.$http.findKeShiZiDian({})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.option2 = [
              {text: '不限', value: ''}
            ]
            var _this = this
            res.data.data.forEach(function (current, index, arr) {
              var obj = { text: current.name, value: current.name }
              _this.option2.push(obj)
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
    // 获取医院等级
    // getHospotal () {
    //   this.$http.findHosptialGrade({})
    //     .then(res => {
    //       console.log(res)
    //       if (res.data.status === 'success') {
    //         this.option3 = [{text: '不限', value: ''}]
    //         var _this = this
    //         res.data.data.forEach(function (current, index, arr) {
    //           var obj = { text: current.GRADE, value: current.GRADE_ID }
    //           _this.option3.push(obj)
    //         })
    //       }
    //     })
    //     .catch(err => {
    //       console.log(err)
    //     })
    // },
    // 获取职称
    // getZhiCheng () {
    //   this.$http.findDoctorMAJOR({})
    //     .then(res => {
    //       console.log(res)
    //       if (res.data.status === 'success') {
    //         this.option4 = [
    //           {text: '不限', value: ''}
    //           // {text: '主任医师', value: '主任医师'},
    //           // {text: '副主任医师', value: '副主任医师'},
    //           // {text: '主治医师', value: '主治医师'},
    //           // {text: '主管护理师', value: '主管护理师'}
    //         ]
    //         var _this = this
    //         res.data.data.forEach(function (current, index, arr) {
    //           var obj = { text: current.MAJOR, value: current.MAJOR }
    //           _this.option4.push(obj)
    //         })
    //       }
    //     })
    //     .catch(err => {
    //       console.log(err)
    //     })
    // }
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollBottom, true)
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #FAF9FE;
  }
  .top{
    position: sticky;
    top: 0;
    background: white;
  }
  header{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    font-family: "PingFang SC";
  }
  .div{
    width: 33%;
    font-size: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
  }
  .div:nth-child(1) img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  .div:nth-child(2){
    justify-content: center;
  }
  .div:nth-child(3){
    justify-content: flex-end;
  }
  .div:nth-child(3) span{
    margin-right: 15px;
  }
  .solid{
    color: #1DA4F2;
  }
  /deep/ .van-dropdown-menu__bar{
    background-color: rgba(29, 164, 242, 0.1);
    box-shadow: none;
    display: flex;
    justify-content: space-around;
    width: 100%;
    overflow-x: auto;
  }
  /deep/ .van-dropdown-menu__title{
    padding: 0 8px 0 0;
  }

  /deep/ .van-dropdown-menu__title::after{
    border-color: transparent transparent #333 #333;
  }
  /deep/ .van-dropdown-item__content{
    max-height: 60%;
  }
  /deep/ .van-dropdown-menu__item{
    /*flex: none;*/
    min-width: 80px;
  }
  .menu{
    width: 100%;
    height: 60px;
    background: #1DA4F2;
    box-shadow: 0px 1px 0px 0px #E5E5E5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow:hidden;
  }
  /*/deep/ .right-content{*/
  /*  overflow: auto;*/
  /*}*/
  /deep/ .right-content li{
    height: 47px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
    box-sizing: border-box;
  }
  /deep/ .van-sidebar-item--select::before{
    position: absolute;
    top: 50%;
    left: 0;
    width: 4px;
    height: 16px;
    background-color: #1DA4F2;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    content: '';
  }
  .PHOTO{
    width: 55px;
    height: 55px;
    border-radius: 50%;
  }
  .box{
    padding: 10px;
    box-sizing: border-box;
    background: white;
    margin-bottom: 8px;
    display: flex;
  }
  .box_left{
    width: 23%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
  }
  .dict_name{
    font-size: 11px;
    border: 1px solid #1DA4F2;
    border-radius: 2px;
    background: rgba(16, 184, 246, 0.1);
    color: #1da4f2;
    padding: 1px 3px;
    box-sizing: border-box;
    white-space: nowrap;
    /*margin-top: 10px;*/
  }
  .box_right{
    width: 78%;
  }
  .box_right ul{
    /*height: 60px;*/
    display: flex;
    flex-direction: column;
    align-content: space-around;
    justify-content: space-around;
  }
  .box_right ul li{
    display: flex;
    align-items: center;
    font-size: 13px;
    min-height: 25px;
  }
  .box_right ul li:nth-child(1){
    justify-content: space-between;
  }
  .name{
    font-size: 15px;
    font-family: PingFang SC;
    color: #333333;
  }
  .biaoqian{
    /*padding: 0px 8px;*/
    min-width: 44px;
    height: 18px;
    border-radius: 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* background: rgba(29, 164, 242, 0.1); */
    background: transparent;
    color: #1DA4F2;
    /* border: none; */
    border: 1px solid;
    font-size: 11px;
    margin-left: 8px;
  }
  .btnXiangQing{
    color: white;
    background: #1DA4F2;
    border: none;
    padding: 3px 8px;
    border-radius: 15px;
    box-sizing: border-box;
    font-size: 11px;
  }
  .btnXiangQing img{
    width: 5px;
    height: 9px;
    margin-left: 5px;
  }

  .btnXiangQing,
  .biaoqian,
  .jieShao
  {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .jieShao{
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    margin-right: 8px;
  }
  .box_rigth_bottom{
    margin-top: 5px;
  }
  .box_rigth_bottom p{
    margin-bottom: 5px;
  }
  .box_rigth_bottom p:nth-child(1),
  .box_rigth_bottom p:nth-child(3){
    font-size: 13px;
  }
  .box_rigth_bottom p a{
  }
  .box_rigth_bottom p span{
    color: #E3170D;
    margin: 0 8px 0 3px;
  }
  .goodAt{
    font-size: 13px;
    display: flex;
  }
  .goodAt a{
    display: block;
    white-space: nowrap;
  }
  .goodAt span{
    /*width: 80%;*/
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #333 !important;
  }
  .select{
    background: rgba(29, 164, 242, 0.2);
  }
.wenZhenIng{
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #2EC49B;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
  .wenZhenIng a{
    display: flex;
    width: 8px;
    height: 8px;
    background: #2EC49B;
    border-radius: 50%;
    margin-right: 5px;
  }

  .name{
    font-size: 15px!important;
    font-weight: bold;
    color: #333333;
  }
  .biaoqian{
    /*padding: 0px 8px;*/
    min-width: 44px;
    height: 18px;
    border-radius: 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* background: rgba(29, 164, 242, 0.1); */
    background: transparent;
    color: #1DA4F2;
    /* border: none; */
    border: 1px solid;
    font-size: 11px;
    margin-left: 8px;
  }
  .btnXiangQing{
    color: white;
    background: #1DA4F2;
    border: none;
    padding: 3px 8px;
    border-radius: 2px;
    box-sizing: border-box;
    font-size: 11px;
  }
  .btnXiangQing img{
    width: 5px;
    height: 9px;
    margin-left: 5px;
  }

  .btnXiangQing,
  .biaoqian,
  .jieShao
  {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .jieShao{
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    margin-right: 8px;
  }
  .box_rigth_bottom{
    margin-top: 5px;
  }
  .box_rigth_bottom p{
    margin-bottom: 5px;
  }
  .box_rigth_bottom p:nth-child(1),
  .box_rigth_bottom p:nth-child(3){
    font-size: 13px;
  }
  .box_rigth_bottom p a{
  }
  .box_rigth_bottom p span{
    color: #E3170D;
    margin: 0 8px 0 3px;
  }
  .goodAt{
    font-size: 13px;
    display: flex;
  }
  .goodAt a{
    display: block;
    white-space: nowrap;
  }
  .goodAt span{
    /*width: 80%;*/
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #333 !important;
  }

  /*/ 选择框 开始样式/*/
  /deep/ .el-steps--horizontal{
    width: 105%;
  }
  /deep/ .el-step.is-center .el-step__description{
    padding: 0;
  }
  /deep/ .el-step__description{
    margin: 0;
    font-size: 13px;
  }
  /deep/ .el-step__icon{
    width: auto;
    height: auto;
  }
  /deep/ .el-step__icon.is-text{
    border: none;
  }
  /deep/ .is-finish,
  /deep/ .el-step__description.is-process{
    color: #fff;
  }
  /deep/ .el-step__description.is-finish{
    color: white !important;
  }
  /deep/ .el-step__description.is-wait{
    color: rgba(255, 255, 255, 0.7);
  }
  /deep/ .el-step__head.is-finish{
    border-color: #fff;
  }
  /deep/ .el-step__head.is-wait{
    border-color: transparent !important;
  }
  /deep/ .el-step__line{
    border-color: transparent !important;
  }
  /deep/ .el-step.is-horizontal .el-step__line{
    height: 1px;
    /*top:7px;*/
    top: 35%;
  }
  /deep/ .el-step__line{
    background: white;
  }
  /*/ 选择框 结束样式/*/
</style>
